<template>
  <div>
    <el-row>
      <span>词云形状选择：</span>
      <el-select
        size="small"
        v-model="shape.value"
        @change="refresh"
        placeholder="请选择词云形状"
      >
        <el-option
          v-for="item in shape.list"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-row>
    <el-divider></el-divider>

    <common-echarts :option="option" ref="echarts" :height="600"></common-echarts>
  </div>
</template>

<script>
import "echarts-wordcloud";
import CommonEcharts from "./echarts.vue";

// 版本支持：echarts2.0版本之后不再在引入的echarts中支持wordCloud,需单独引入。引入原js或者min都可以
// 文档：https://github.com/ecomfe/echarts-wordcloud
export default {
  name: "WordcloudEcharts",
  components: {
    CommonEcharts,
  },
  computed: {
    option() {
      const { value } = this.shape;

      let series = [
        {
          name: "词汇频繁程度",
          type: "wordCloud",
          gridSize: 6, // 词的间距
          shape: value || "star", // 词云形状，可选diamond,pentagon,circle,triangle,star等形状
          sizeRange: [12, 30], // 词云字像素大小范围
          // 词云显示宽高
          width: 400,
          height: 400,

          rotationRange: [-90, 90],
          rotationStep: 45,

          // 词云样式
          // Global text style
          textStyle: {
            fontFamily: "sans-serif",
            fontWeight: "bold",
            // Color can be a callback function or a color string
            color: function () {
              // Random color
              return (
                "rgb(" +
                [
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                ].join(",") +
                ")"
              );
            },
          },
          emphasis: {
            focus: "self",

            textStyle: {
              textShadowBlur: 10,
              textShadowColor: "#333",
            },
          },
          data: [
            { name: "没有", value: 30 },
            { name: "屏幕", value: 10 },
            { name: "不错", value: 6 },
            { name: "可以", value: 7 },
            { name: "发货", value: 33 },
            { name: "差评", value: 11 },
            { name: "什么", value: 22 },
            { name: "质量", value: 13 },
            { name: "不好", value: 23 },
            { name: "快递", value: 12 },
            { name: "问题", value: 4 },
            { name: "几天", value: 12 },
            { name: "一般", value: 19 },
            { name: "就是", value: 13 },
            { name: "使用", value: 15 },
            { name: "电池", value: 12 },
            { name: "客服", value: 17 },
            { name: "速度", value: 13 },
          ],
        },
      ];

      return {
        title: {
          text: "电商评论重要词汇分析图",
          subtext: "越大代表该词约频繁",
          left: "center",
        },
        tooltip: {
          show: true,
        },
        series: series,
      };
    },
  },
  data() {
    return {
      shape: {
        list: [
          { name: "菱形", value: "diamond" },
          { name: "五边形", value: "pentagon" },
          { name: "圆形", value: "circle" },
          { name: "三角形", value: "triangle" },
          { name: "五角星", value: "star" },
        ],
        value: "star",
      },
    };
  },
  methods: {
    refresh() {
      console.log("option:", this.option);
      this.$nextTick(this.$refs.echarts.refresh);
    },
  },
};
</script>
